<template>
    <el-header class="ep-header">
        <i class="ep-icon ep-icon-sidebar" v-show="!isSidebar" @click="shrink">
            <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"
                 aria-hidden="true">
                <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"></path>
            </svg>
        </i>
        <i class="ep-icon ep-icon-sidebar" v-show="isSidebar" @click="shrink">
            <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"
                 aria-hidden="true">
                <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8z"></path>
            </svg>
        </i>
        <div class="ep-header-right">
            <span>
                <i class="ep-icon ep-icon-help">
                    <svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                        <path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path>
                    </svg>
                </i>
            </span>
            <el-dropdown @command="handleCommand">
                <span class="ep-header-right-account">
                    <img src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" alt="avatar">
                    <span>admin</span>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">修改密码</el-dropdown-item>
                    <el-dropdown-item command="e" divided>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>

        </div>
    </el-header>
</template>

<script type="es6">
    export default {
        data() {
            return {}
        },
        computed: {
            isSidebar() {
                return this.$store.getters.isSidebar;
            }
        },
        watch: {
            isSidebar: {
                handler(value) {
                    return value;
                },
                deep: true
            },
        },
        methods: {
            /**
             * 收缩左侧菜单
             */
            shrink() {
                this.$store.dispatch('SET_SIDEBAR', !this.isSidebar);
            },
            handleCommand(command) {
                // console.log(command);
            }
        }
    }
</script>

<style lang="less" scoped>
    .ep-header {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .ep-icon-sidebar {
            font-size: 20px;
            cursor: pointer;
            transition: all .3s, padding 0s;
            float: left;
        }
        &-right {
            display: flex;
            align-items: center;
            float: right;
            span {
                cursor: pointer;
                height: 60px;
                display: flex;
                align-items: center;
                margin: 0 12px;
                transition: all .3s;
            }
            .ep-icon-help {
                margin-top: 5px;
            }
            &-account {
                display: inline-block;
                transition: all .3s;
                img {
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
</style>